<template>
	<div>
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label="心理知识名称">
				<el-input v-model="formInline.name" clearable placeholder="心理测评名称"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="heartmarklist()" class="sjss">搜索</el-button>
				<el-button type="primary" style="margin-bottom: 10px;" @click="xingzheng()">新增文章分类</el-button>
			</el-form-item>
		</el-form>



		<el-table :data="list" border style="width: 100%"
			:header-cell-style="{fontSize: '14px', backgroundColor: '#1890ff',color:'#ffffff'}">
			<el-table-column prop="id" label="ID">
			</el-table-column>
			<el-table-column prop="name" label="测评名">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-link type="primary" @click="toEditheartmark(scope.row)">编辑文章分类</el-link>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

					<el-link type="primary" @click="shanchushijian(scope.row.id)">删除文章分类</el-link>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;
					<el-link type="primary" @click="relatedArticlesType(scope.row.id)">查看关联文章</el-link>
				</template>
			</el-table-column>
		</el-table>


		<el-pagination @size-change="paginationSize" @current-change="paginationCurrent"
			:current-page="formInline.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="formInline.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
		<!-- 新增和修改的对话框 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancel">
			<el-form :model="heartmark">
				<el-form-item label="文章名称" label-width="80px">
					<el-input placeholder="请输入文章名称" v-model="heartmark.name">
					</el-input>
				</el-form-item>













			</el-form>

			<div slot="footer" class="dialog-footer">

				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="heartmarkAdd">确 定</el-button>

			</div>

		</el-dialog>

		<el-dialog :title="title" :visible.sync="relatedArticles" @close='cancal()'>




			<el-table :data="articleList" @selection-change="handleSelectionChange" style="width: 100%" border>
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="id" label="ID" width="180">
				</el-table-column>
				<el-table-column prop="articleName" label="文章名称" width="180">
				</el-table-column>

				<el-table-column prop="consult.name" label="作者">
				</el-table-column>

				<el-table-column prop="articletype.name" label="文章类型">
				</el-table-column>

			</el-table>

			<div slot="footer" class="dialog-footer">
				<el-button @click="cancal()">取 消</el-button>
				<el-button type="primary" @click="guanLianArticle()">确 定</el-button>

			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				heartmark: { // 心理測評
					"id": '',
					"name": "",
				},
				formInline: {
					name: '',
					pageNum: 1,
					pageSize: 10
				},
				xiugaishuji: [{
					id: 1,
					ids: null
				}],
				// id: 1,
				list: [],
				total: 1,
				// ids: null,
				articleList: [],
				relatedArticles: false,
				title: '新增文章类型',
				dialogFormVisible: false,
				fileList: [],

			}
		},
		methods: {
			guanLianArticle() {
				console.log(this.xiugaishuji)
				this.$http.put('articletype/updateid/' + this.xiugaishuji.id, this.xiugaishuji.ids)
					.then(res => {
						if (res.data.status == 200) {
							this.$message.success('修改成功')
							this.dialogFormVisible = false;
							this.heartmarklist()
							this.cancel()
						} else {
							this.$message.error('修改失败！')
						}
					})
				this.relatedArticles = false;
			},
			xingzheng() {
				this.dialogFormVisible = true;
				this.title = '新增文章类型';
			},
			relatedArticlesType(res) {
				this.xiugaishuji.id = res;
				this.title = '选择要关联的文章'
				this.relatedArticles = true;
				this.$http.get('Article/pageSelect', {
						params: this.queryInfo
					})
					.then(res => {
						if (res.data.status == 200) {
							this.articleList = res.data.data.list
							this.total = res.data.data.total

						} else {
							this.$message('请求异常')
						}
					})
					.catch(err => {
						this.$message.error(err)
					})
			},
			cancal() {
				this.relatedArticles = false;
			},
			shanchushijian(id) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.delete('articletype/delete/' + id)
						.then(res => {
							if (res.data.status == 200) {
								this.$message({
									type: 'success',
									message: '删除成功!'
								});
								this.heartmarklist()
							} else {
								this.$message({
									type: 'info',
									message: '删除失败'
								});
							}
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			heartmarkAdd() {
				if (this.title == '新增文章类型') {
					this.$http.post('articletype/add', this.heartmark)
						.then(res => {
							if (res.data.status == 200) {
								this.$message.success('添加成功')
								this.dialogFormVisible = false;
								this.heartmarklist()
								this.cancel()
							} else {
								this.$message.error('添加失败！')
							}
						})
				} else if (this.title == '修改文章类型') {
					this.$http.put('articletype/update', this.heartmark)
						.then(res => {
							if (res.data.status == 200) {
								this.$message.success('修改成功')
								this.dialogFormVisible = false;
								this.heartmarklist()
								this.cancel()
							} else {
								this.$message.error('修改失败！')
							}
						})
				}
				this.fileList = [];
			},
			heartmarklist() {
				this.$http.get(
						'articletype/find', {
							params: this.formInline
						})
					.then(res => {
						if (res.data.status == 200) {
							this.list = res.data.data.list;
							this.total = res.data.data.total;
							console.log()
						} else {
							this.$message.error('接口异常')
						}
					})
					.catch(err => {
						this.$message.error('接口异常')
					})
			},
			paginationSize(val) {
				this.formInline.pageSize = val;
				this.formInline.pageNum = 1;
				this.heartmarklist();
			},
			paginationCurrent(val) {
				this.formInline.pageNum = val;
				this.heartmarklist();
			},
			// 批量修改
			handleSelectionChange(val) {
				this.xiugaishuji.ids = val.map(function(item) {
					return item.id;
				});
				// console.log(this.ids);
			},
			cancel() {
				this.dialogFormVisible = false;
				this.heartmark = {
					name: "",
					simplyIntroduce: "",
					img: "",
					text: "",
					createTime: ""
				};
				this.title = "新增文章类型";
				this.fileList = [];
			},
			toEditheartmark(row) {
				// console.log(row)
				// 赋值
				this.heartmark = row;
				// 设置标题
				this.title = "修改文章类型";

				// 开启对话框
				this.dialogFormVisible = true;
				// 动态的获取图片的名称并帮到到fileList
				this.fileList = [{
					name: row.img,
					url: 'http://10.10.18.194:8888/yuLan?filename=' + row.img
				}];



			},





		},

		mounted() {
			this.heartmarklist()
		},
	}
</script>

<style>
</style>